<template>
    <div>
      <!-- 头部 -->
      <div>
        <div id="head">
            <div class="head_show" style="position: absolute;top:20px;right:100px;">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="首页" name="first"></el-tab-pane>
                <el-tab-pane label="关于我们" name="second"></el-tab-pane>
                <el-tab-pane label="产品提示" name="third"></el-tab-pane>
                <el-tab-pane label="新闻资讯" name="fourth"></el-tab-pane>
                <el-tab-pane label="健康评估报告" name="zhong"></el-tab-pane>
                <el-tab-pane label="咨询列表" name="liu"></el-tab-pane>
                <el-tab-pane label="注册" name="zhu"></el-tab-pane>
                <el-tab-pane label="未登录" name="look" v-if="show"></el-tab-pane>
                <el-tab-pane label="退出登录" name="beak"></el-tab-pane>
                 <el-tab-pane label="修改密码" name="qin"></el-tab-pane>
                <el-tab-pane label="联系我们" name="lian"></el-tab-pane>
              </el-tabs>
            </div>
            <div @click="imGClick">
                <el-avatar :src="'http://192.168.43.183/files/' + Img" v-if="params" style="position: absolute;left:1480px;top:20px;cursor: pointer;"></el-avatar>
            </div>
              <!-- 修改密码的对话框 -->
              <el-dialog
                :visible.sync="dialogVisiblephone"
                width="35%">
                <div class="form-group" v-if="Meberpass">
                  <span style="position:absolute;top:10px;font-size:25px">修改密码</span><br>
                  <input type="text" class="form-control" v-model="mephone" placeholder="请输入手机号验证" readonly>
                  <br>
                  <input v-model="yanzhengma" clearable size="small" type="text" placeholder="请输入验证码" style="width:400px;height:35px;border-radius: 6px;border:1px solid darkgrey" @blur="bluryanzheng"/>
                  <button class=" btn btn-primary" @click="daojishi" :disabled="yanzheng" v-if="canClick">发送验证码</button>
                  <button class=" btn btn-primary" @click="daojishi" :disabled="yanzheng" v-if="yanzheng">{{content}}</button>
                  <button class="btn btn-primary" style="margin-left:170px;margin-top:20px;width:150px;border:none;outline: none;" @click="queding">确定</button>
                </div>
                <div class="form-group" v-else>
                  <input type="text" class="form-control" v-model="mepassword2" placeholder="请输入新密码">
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false" style="margin-top:66px;margin-left:320px">取 消</el-button>
                    <el-button type="primary" @click="quepass" style="position:absolute;top:158px;left:420px">确 定</el-button>
                  </span>
                </div>
              </el-dialog>
        <!-- 标志 -->
        <div style="margin-left:180px;height:100px">
            <svg  class="icon myIcontp" style="position:absolute;left:80px;bottom:475px">
              <use xlink:href="#icon-xikangyunyiyuanbiaozhi"></use>
            </svg>
        </div>
        </div>
      <!-- 中间部分 -->
      <div style="margin-top:40px">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in list" :key="item">
            <img :src='item' style="width:800px;height:300px">
          </el-carousel-item>
        </el-carousel>
        <!-- 我们的优势 -->
          <div style="text-align: center">
            <h3>服务优势</h3>
            <span><font style="color:darkgray">用心,细心,专心</font></span>
          </div>
      </div>
      <!-- 尾部 -->
        <div style="margin-top: 30px;text-align: center" id="textShow">
          <div class="one" @click="consult">
            <svg class="icon myIcom" aria-hidden="true">
              <use xlink:href="#icon-dagou"></use>
            </svg>
            <h4>预约体检</h4>
            <p><span>专家会诊,医院远程会诊,提供远程会诊方案</span></p>
          </div>
          <div class="two" @click="setMeal">
              <svg class="icon myIcom" aria-hidden="true">
                <use xlink:href="#icon-wenjuan"></use>
              </svg>
            <h4>健康评估</h4>
            <p><span>了解自身健康,身体倍棒</span></p>
          </div>
          <div class="three" @click="specialist">
              <svg class="icon myIcom" aria-hidden="true">
                <use xlink:href="#icon-zixun1"></use>
              </svg>
            <h4>专家咨询</h4>
            <p><span>国内外专家联合会诊</span></p>
          </div>
          <div class="fron" @click="diagnose">
             <svg class="icon myIcom" aria-hidden="true">
                <use xlink:href="#icon-chaxun1"></use>
              </svg>
            <h4>专业诊断报告</h4>
            <p><span>提供专业诊断报告,清清楚楚明明白白</span></p>
          </div>
        </div>
        <div id="textMo" style="margin-top: 70px;text-align: left">
          <div style="margin-top: 50px;margin-left:195px">
            <h3>是否提前预约，是否需要我们帮你预约会诊？</h3>
            <span>国内三甲医院,权威专家会诊，内外科,泌尿科,综合部门...</span>
          </div>
          <button @click="oncluck">点击预约</button>
        </div>
      </div>
    </div>
</template>

<script>
import Logon from './components/Logon.vue'
export default {
  name: 'Home',
  data () {
    return {
      list: [
        'static/img/widget-banner_02.png',
        'static/img/widget-banner_01.png',
        'static/img/6.jpg'
      ],
      dialogVisible: false,
      activeName: '',
      classgou: '#icon-gou',
      params: false,
      show: true,
      mephone: '',
      mepassword2: '',
      dialogVisiblephone: false,
      Meberpass: true,
      mid: 0,
      yanzheng: false,
      canClick: true,
      yanzhengma: '',
      wait: '60',
      content: '',
      Img: ''
    }
  },
  components: {
    Logon
  },
  methods: {
    // 四个按钮的点击事件
    consult () {
      if (this.$store.state.user.memPhone === undefined) {
        // 没有登录,请先登录
        this.$message('你还没有登录,请先登录在做操作')
        this.$router.push('/login')
      } else {
        this.$router.push('/appointment')
      }
    },
    // 套餐服务
    setMeal () {
      if (this.$store.state.user.memPhone === undefined) {
        // 没有登录,请先登录
        this.$message('你还没有登录,请先登录在做操作')
        this.$router.push('/login')
      } else {
        this.$router.push('/assess')
      }
    },
    // 专家会诊
    specialist () {
      if (this.$store.state.user.memPhone === undefined) {
        // 没有登录,请先登录
        this.$message('你还没有登录,请先登录在做操作')
        this.$router.push('/login')
      } else {
        this.$router.push('/physique/' + this.mid)
      }
    },
    // 诊断报告
    diagnose () {
      if (this.$store.state.user.memPhone === undefined) {
        // 没有登录,请先登录
        this.$message('你还没有登录,请先登录在做操作')
        this.$router.push('/login')
      } else {
        this.$router.push('/report')
      }
    },

    handleClick (tab, event) {
      // 登录的点击事件
      if (tab.paneName === 'look') {
        this.$router.push('/login')
      }
      // 退出的点击事件
      if (tab.paneName === 'beak') {
        sessionStorage.removeItem('user')
        sessionStorage.removeItem('mem')
        this.$router.push('/login')
        window.location.reload()
      }
      // 注册的点击事件
      if (tab.paneName === 'zhu') {
        this.$router.push('/logon')
      }
      // 修改密码 打开对话框
      if (tab.paneName === 'qin' && this.$store.state.user.memPhone === undefined) {
        this.$message.error('请先登录')
      } else if (tab.paneName === 'qin') {
        this.dialogVisiblephone = true
      }
      // 健康评估查询
      if (tab.paneName === 'zhong' && this.$store.state.user.memPhone === undefined) {
        this.$message.error('请先登录')
      } else if (tab.paneName === 'zhong') {
        this.$router.push('/constitution/' + this.mid)
      }
      // 专家咨询
      if (tab.paneName === 'liu' && this.$store.state.user.memPhone === undefined) {
        this.$message.error('请先登录,再咨询')
      } else {
        this.$axios.post(`/api/CXKChatTableController/selectzixun/${this.mid}`).then(result => {
          if (result.data.length === 0 && tab.paneName === 'liu') {
            this.$message.error('你还没有进行专家咨询,请先专家咨询')
          } else if (tab.paneName === 'liu') {
            this.$router.push('/templist')
          }
        })
      }
    },
    // 个人信息点击事件
    imGClick () {
      this.$router.push('/personal')
    },

    // 点击按钮预约事件
    oncluck () {
      if (this.$store.state.user.memPhone === undefined) {
        // 没有登录,请先登录
        this.$message('你还没有登录,请先登录在做操作')
        this.$router.push('/login')
      } else {
        this.$router.push('/appointment')
      }
    },
    // 确定修改密码
    quepass () {
      if (this.mepassword2 === '') {
        this.$message.error('密码不能为空')
      } else {
        this.$axios.post(`/api/logincon/updatemepassword/${this.mid}/${this.mepassword2}`).then(result => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.dialogVisiblephone = false
          this.$router.push('/login')
        })
      }
    },
    // 发送验证码
    daojishi () {
      if (!this.canClick) return
      this.canClick = false
      this.yanzheng = true
      this.content = this.wait + '秒' // 这里解决60秒不见了的问题
      this.$axios.get(`https://cloud-music-api-lyart.vercel.app/captcha/sent?phone=${this.mephone}`).then(result => {
        if (result.data.data) {
          this.$message({
            message: '验证码发送成功！',
            type: 'success'
          })
        } else {
          this.$message.error('发送失败！请稍后再试')
        }
      })
      let clock = window.setInterval(() => {
        this.wait--
        this.content = this.wait + '秒'
        if (this.wait < 0) { // 当倒计时小于0时清除定时器
          window.clearInterval(clock)
          this.content = '验证码'
          this.wait = 60
          this.yanzheng = false
          this.canClick = true
        }
      }, 1000)
    },
    // 验证码的失焦事件
    bluryanzheng () {
      if (this.yanzhengma === '') {
        this.$message.error('验证码不能为空')
      }
    },
    // 确定发送验证
    queding () {
      this.Meberpass = false
    }
  },
  created () {
    let use = sessionStorage.getItem('user')
    let meuse = JSON.parse(use)
    this.mid = meuse.memId
    this.mephone = meuse.memPhone
    this.Img = meuse.memImg
    if (this.$store.state.user.memPhone != null) {
      this.params = true
      this.show = false
    }
  }
}
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .one{
    position: absolute;
    left: 150px;
    width: 200px;
    float: right;
  }
  .two{
    position: absolute;
    left: 480px;
    width: 200px;
  }
  .three{
    position: absolute;
    left: 850px;
    width: 200px;
  }
  .fron{
     position: absolute;
    left: 1200px;
    width: 200px;
  }
 #textShow{
    width: 800px;
    height: 200px;
  }
  #textShow h4{
    cursor: pointer;
  }
  #textShow span{
    cursor: pointer;
  }
  #textMo{
    width: 1560px;
    height: 150px;
    border: 1px solid Gainsboro;
    background-color: Gainsboro;
  }

  #textMo button{
    position: absolute;
    right: 100px;
    top: 840px;
    border: 1px solid DimGray;
    background-color: DimGray;
  }
  #head{
    width: 1530px;
    height: 50px;
  }
  #textShow svg{
    cursor: pointer;
    transition: all 0.4s;
  }
  #textShow svg:hover{
    transform: scale(1.1);
  }
.icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.myIcom{font-size: 100px;}
.myIcontp{font-size: 400px;}
/* 去掉滚动条 */
   ::-webkit-scrollbar {width: 0 !important;}
   ::-webkit-scrollbar {width: 0 !important;height: 0;}
</style>
